<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>图片裁剪</title>
    <!-- 在IOS设备上，有时会将数字转为手机号，这里也要禁止下 -->
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            /*background-color: transparent;
                                background: rgba(0,0,0,0);*/
        }

        #foot_div {
            display: block;
            bottom: 0px;
            padding-left: 20px;
            padding-right: 20px;
            /*right: 18px;*/
            min-width: 200px;
            line-height: 30px;
            width: 100%;
            position: fixed;
            /*border: 1px solid #fff;*/
            text-align: center;
            color: #fff;
            background: #000;
            padding-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="foot_div">
        <!--<div id="container" class="aui-button-row">-->
        <span>
            <span class="aui-pull-left" tapmode onclick="back();">取消</span>
            <span tapmode onclick="resetImageClip();">重置</span>
            <span tapmode onclick="saveImageClip();" class="aui-pull-right">选取</span>
        </span>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var FNImageClip;
    apiready = function() {
        var img_src = api.pageParam.img_src;
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
        FNImageClip = api.require('FNImageClip');
        openImageClip(img_src);
        //安卓关闭
        if (api.systemType == 'android') {
            backForAndroid();
        }
    };

    /**
     * 对头像进行裁剪
     */
    function openImageClip(img_src) {
        var rect_w = api.winWidth;
        var rect_h = api.winHeight;
        var clip_w = parseInt(rect_w - 2);
        var clip_y = parseInt((rect_h - clip_w - 30) / 2);
        FNImageClip.open({
            rect: {
                x: 0,
                y: 0,
                w: rect_w,
                h: rect_h - 50
            },
            // srcPath: 'widget://image/1.jpg',
            srcPath: img_src,
            highDefinition: false,
            style: {
                mask: 'rgba(0,0,0,0.5)',
                clip: {
                    w: clip_w,
                    h: clip_w,
                    x: 0,
                    y: clip_y,
                    borderColor: '#0f0',
                    borderWidth: 1,
                    appearance: 'rectangle'
                }
            },
            fixedOn: api.frameName
        }, function(ret, err) {

        });

    }

    /**
     * 安卓点击返回的时候
     */
    function backForAndroid() {
        api.addEventListener({
            name: "keyback"
        }, function(ret, err) {
            back();
        });
    }

    /**
     * 返回应用页面
     */
    function back() {
        // closeImageClip();
        api.closeFrame({
            name: 'imageclip_frame'
        });
    }

    /**
     * 关闭裁剪组件
     */
    function closeImageClip() {
        FNImageClip.close();
    }

    /**
     * 重置裁剪组件
     */
    function resetImageClip() {
        FNImageClip.reset();
    }

    /**
     * 保存裁剪组件
     */
    function saveImageClip() {
        var timestamp = new Date().getTime();
        var imgiurl = 'fs://imageClip/result' + timestamp + '.png'
        FNImageClip.save({
            destPath: imgiurl,
            copyToAlbum: false,
            quality: 1
        }, function(ret, err) {

            if (ret) {
                api.sendEvent({
                    name: 'clipimagesrc',
                    extra: {
                        clipimagesrc: ret.destPath
                    }
                });
                api.closeFrame({
                    name: 'imageclip_frame'
                });

            } else {
                api.toast({
                    msg: '服务器繁忙，请稍后再试',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        });
    }
</script>

</html>
